<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/paper-styles/color.html">
<link rel="import" href="../../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/hero-animation.html">

<dom-module id="list-view">
    <template>

        <style>
            :host {
                @apply(--layout-vertical);
            }
            .main {
                @apply(--layout-flex);
                @apply(--layout-scroll);
                height: 500px;
            }

            iron-icon {
                color: var(--google-grey-500);
            }
            paper-toolbar{
                --paper-toolbar-height : 50px;
                background: transparent;
            }

            paper-item-body{
                --paper-item-body-secondary-color: white;
            }

            paper-item:hover{
                cursor: pointer;
                background-color: rgba(106, 110, 107, 0.19);
            }


            iron-icon{
                --iron-icon-fill-color:white;
            }
            #title{
                color:black;
            }
        </style>

        <paper-toolbar >
            <h3 id="title">Log files</h3>
            <!--paper-icon-button id="button" icon="arrow-back"></paper-icon-button-->
        </paper-toolbar>

        <div class="main">
            <template is="dom-repeat" id="list_file" items="{{list_log}}" as="file">
                <paper-item on-click="onClick">
                    <paper-item-body two-line>
                        <div>{{file.fileName}}</div>
                        <div secondary>{{file.modifiedDate}}</div>
                    </paper-item-body>
                    <iron-icon icon="info"></iron-icon>
                </paper-item>
            </template>
        </div>
    </template>

</dom-module>

<script>
    Polymer({
        is: 'list-view',
        behaviors: [
            Polymer.NeonAnimatableBehavior
        ],

        properties: {
            list_log: {
                type: Array
            },
            animationConfig: {
                type: Object,
                value: function() {
                    return {
                        'entry': [{
                            name: 'fade-in-animation',
                            node: this.$.title
                        }],
                        'exit': [{
                            name: 'fade-out-animation',
                            node: this.$.title
                        }, {
                            name: 'hero-animation',
                            id: 'hero',
                            fromPage: this
                        }]
                    };
                }
            }
        },
        onClick: function(e) {
            var target = e.target;

            // configure the page animation
            this.sharedElements = {
                'hero': target,
            };
            var __item = this.$.list_file.itemForElement(target);
            this.fire('item-click', {
                data:__item
            });
        }
    });
</script>